<template>
  <div class="bg-white _p-20 _pt-5 _mt-20" style="width:50%">
    <div class="fz-16 title linh-48 disFlxJS">
      <div>活动报名数据</div>
      <a-button size="default" type="primary" ghost @click="handleToStatistics">
        前往数据中心
        <a-icon type="right" style="font-size:12px" />
      </a-button>
    </div>
    <div class="gridBox">
      <template v-for="item in list">
        <div v-if="item.show" :key="item.label">
          <div>{{ item.label }}</div>
          <div class="fz-24 fw-6 text-dark-900">
            {{ item.value || 0 }}
          </div>
          <NumIncrease :number="item.today"></NumIncrease>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { activityTypeEnum } from '@/enums/activity'


import NumIncrease from '../components/NumIncrease/index.vue'

export default {
  components: {
    NumIncrease
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    // 主办方是否存在协办组织
    isExistJointly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    list() {
      return [
        {
          label: '报名数（总）',
          value: this.info.totalTicketNum,
          today: this.info.todayTotalTicketNum,
          show: true
        },
        {
          label: '费用总额（总）',
          value: this.info.totalTicketPrice,
          today: this.info.todayTotalTicketPrice,
          show: true
        },

        {
          label: '本会报名数',
          value: this.info.totalTicketNumByCurrentTenant,
          today: this.info.todayTotalTicketNumByCurrentTenant,
          show: this.disabled || this.isExistJointly
        },
        {
          label: '本会费用总额',
          value: this.info.totalTicketPriceByCurrentTenant,
          today: this.info.todayTotalTicketPriceByCurrentTenant,
          show: this.disabled || this.isExistJointly
        }
      ]
    },
    disabled() {
      return this.info.activityType === activityTypeEnum.other_join // 协办方
    }
  },
  data() {
    return {}
  },
  methods: {
    handleToStatistics() {
      this.$router.push({
        path: '/activity/activityStatistics',
        query: {
          activityId: this.$route.query.activityId
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #1d2129;
  border-bottom: solid 1px #e5e6eb;
}
.gridBox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 0.5rem;
  column-gap: 0.5rem;
  grid-row-gap: 2rem;
  row-gap: 2rem;
  text-align: center;
  padding-top: 20px;
}
</style>
